<script setup lang="ts">
import {userType} from "../models/user";

interface userCardListProps {
  userList: userType[]
  loading: boolean
}

// withDefaults 用来设置默认值 防止报错
const props = withDefaults(defineProps<userCardListProps>(), {
  // @ts-ignore
  userList: [] as userType[],
  loading: true
})
</script>

<template>
  <van-skeleton :loading="props.loading" v-for="item in 7" style="padding-bottom: 10px">
    <template #template>
      <div :style="{ display: 'flex', width: '100%' }">
        <van-skeleton-image/>
        <div :style="{ flex: 1, marginLeft: '16px' }">
          <van-skeleton-paragraph row-width="60%"/>
          <van-skeleton-paragraph/>
          <van-skeleton-paragraph/>
          <van-skeleton-paragraph/>
        </div>
      </div>
    </template>

  </van-skeleton>
  <van-card
      v-for="user in props.userList"
      :title="`${user.username}(${user.planetCode})`"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag plain size="medium" type="danger" color="#f07775" v-for="tag in user.tags"
               style="margin-right: 8px; margin-top: 6px">
        {{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="small">联系我</van-button>
    </template>
  </van-card>
</template>

<style scoped lang="scss">
.van-card {
  font-size: 16px;
  font-weight: bolder;
  font-family: "KaiTi", "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;

  :deep(.van-card__title) {
    padding-top: 3px;
  }
}
</style>